<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="报工" width="1000px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
    <div class="formTopFont">报工登记单</div>
    <el-row>
      <div class="detailCont detailDialogFont threeDetailStyle">
        <ul>
          <li>
            <b>作业单号</b>
            <span>{{ rows.reportNo }}</span>
          </li>
          <li>
            <b>排程单号</b>
            <span>{{ rows.scheduleNo }}</span>
          </li>
          <li>
            <b>成品物料</b>
            <span>{{ rows.materialName }}{{rows.materialCode ? '【' + rows.materialCode + '】' : ''}}</span>
          </li>
          <li>
            <b>任务数量</b>
            <span>{{ rows.taskNum }}</span>
          </li>
          <li>
            <b>生产批号</b>
            <span>{{ rows.proNo }}</span>
          </li>
          <li>
            <b>作业车间</b>
            <span>{{ rows.factoryName }}</span>
          </li>
          <li>
            <b>工序</b>
            <span>{{ rows.procedureName }}</span>
          </li>
          <li>
            <b>是否完工</b>
            <span>{{ rows.isAllFinish === 1 ? '是':'否' }}</span>
          </li>
          <li>
            <b>在检数</b>
            <span>{{ rows.checkNum }}</span>
          </li>
        </ul>
      </div>
      <div class="nbStyle">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="90px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="工序" prop="procedureId">
                <el-select v-model="ruleForm.procedureId" style="width: 100%" filterable>
                  <el-option v-for="item in procedureList" :key="item.id" :label="item.procedureName" :value="item.procedureId">
                    <div @click="procedureChange(item)">
                      <span>{{ item.procedureName }}{{'【' + item.materialName + '】'}}</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料名称" prop="materialName">
                <el-input v-model="details.materialName" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料编码" prop="materialCode">
                <el-input v-model="details.materialCode" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="单位" prop="unit">
                <el-input v-model="details.unit" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务数" prop="procedureNum">
                <el-input v-model="details.procedureNum" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="已报合格数" prop="reportQualifiedNum">
                <el-input v-model="details.reportQualifiedNum" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="设备" prop="equipId">
                <el-select v-model="ruleForm.equipId" style="width: 100%" filterable>
                  <el-option v-for="item in eqList" :key="item.id" :label="item.equipName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合格数" prop="qualifiedNum">
                <el-input-number v-model="ruleForm.qualifiedNum" size="mini" :controls="false" :min="0" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="返工数量" prop="reworkNum">
                <el-input-number v-model="ruleForm.reworkNum" size="mini" :controls="false" :min="0" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="废品数" prop="badNum">
                <el-input-number v-model="ruleForm.badNum" size="mini" :controls="false" :min="0" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产日期" prop="proDate">
                <el-date-picker v-model="ruleForm.proDate" type="date" placeholder="选择日期时间" style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="加工人" prop="userId">
                <el-select v-model="ruleForm.userId" style="width: 100%" filterable>
                  <el-option v-for="item in userAllList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否完工" prop="isFinish">
                <el-checkbox v-model="ruleForm.isFinish" :true-label="1" :false-label="0" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-row>
    <bottom-font ref="bottomFont" :obj-name="this.$store.getters.compInfo.userName" :obj-date="ruleForm.createAt" />
  </el-dialog>
</template>
<script>
import TreeSelect from '@/components/TreeSelect'
import { timeFormatToString } from '@/utils/function'
import bottomFont from '@/components/BottomFont'
export default {
  components: { TreeSelect, bottomFont },
  props: {
    userAllList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      ruleForm: {
        equipId: '',
        procedureId: '',
        isFinish: 0,
        reworkNum: '',
        proDate: timeFormatToString(new Date()),
        userId: '',
        equipId: '',
        badNum: '',
        qualifiedNum: '',
        reportDetailId: '',
        materialId: ''
      },
      rules: {
        procedureId: [
          { required: true, message: '物料不能不能为空！', trigger: 'change' }
        ],
        equipId: [
          { required: true, message: '设备不能为空！', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      procedureList: [],
      eqList: [],
      details: {},
      rows: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.rows = row
      this.getDetail(row.id)
      this.dialogVisible = true
    },
    /* 编辑获取详情 */
    async getDetail(id) {
      const res = await this.$axios.get(`/pro/report/getDetail?id=${id}`)
      if (res.data.code === 200) {
        this.procedureList = res.data.data
      }
    },
    /* 工序选择事件 */
    procedureChange(row) {
      this.details = row
      this.getEquipList(row.procedureId)
    },
    /* 工序获取设备 */
    async getEquipList(id) {
      const res = await this.$axios.get(
        `/pro/report/getEquip?procedureId=${id}`
      )
      if (res.data.code === 200) {
        this.eqList = res.data.data
      }
    },
    /* 新增编辑表单提交 */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (
            this.ruleForm.badNum <= 0 &&
            this.ruleForm.qualifiedNum <= 0 &&
            this.ruleForm.reworkNum <= 0
          ) {
            this.$alert(`返工,合格,废品数其中一个必须大于0!`, '提示', {
              confirmButtonText: '确认',
              type: 'warning'
            })
          } else {
            this.ruleForm.id = this.rows.id
            this.ruleForm.reportDetailId = this.details.id
            this.ruleForm.materialId = this.details.materialId
            console.log(this.ruleForm)
            const res = await this.$axios.post(
              '/pro/report/report',
              this.ruleForm
            )
            if (res?.data.code === 200) {
              this.$notify.success('提交成功！')
              this.dialogVisible = false
              this.$emit('getTableInfo')
            } else {
              this.$notify.error(res.data.msg)
            }
          }
        }
      })
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        equipId: '',
        procedureId: '',
        isFinish: 0,
        reworkNum: '',
        proDate: timeFormatToString(new Date()),
        userId: '',
        equipId: '',
        badNum: '',
        qualifiedNum: '',
        reportDetailId: '',
        materialId: ''
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.nbStyle {
  margin: 5px 0;
  padding: 10px 10px 0 0;
  background: #fafafa;
  border: 1px solid #eee;
}
</style>
